"use server";

import Title from "antd/es/typography/Title";
import { Button, Flex, Menu, message } from "antd";
import QuestionTable from "@/components/QuestionTable/page";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import { getQuestionVoByIdUsingGet } from "@/api/questionController";
import Sider from "antd/es/layout/Sider";
import { Content } from "antd/es/layout/layout";

import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useState } from "react";
import QuestionCard from "@/components/QuestionCard";
import Link from "next/link";
import QuestionSidebar from "@/components/QuestionSidebar";

// @ts-ignore
/**
 * 题目详情页面
 */

export default async function BankQuestionPage({ params }) {
  // 获取 url 的查询参数
  const { questionBankId, questionId } = params;
  // 获取题库详情
  let bank = undefined;
  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: questionBankId,
      needQueryQuestionList: true,
      // 可以自行扩展为分页实现
      pageSize: 200,
    });
    bank = res.data;
  } catch (e) {
    // @ts-ignore
    message.error("获取题库列表失败，" + e.message);
  }
  // 错误处理
  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>;
  }

  // 获取题目详情
  let question = undefined;
  try {
    const res = await getQuestionVoByIdUsingGet({
      id: questionId,
    });
    question = res.data;
  } catch (e) {
    message.error("获取题目详情失败，" + e.message);
  }
  // 错误处理
  if (!question) {
    return <div>获取题目详情失败，请刷新重试</div>;
  }
  // 左侧菜单显示题目
  // const questionsMenuList = (bank.questionPage?.records || []).map((question) => ({
  //   key: question.id,
  //   label: question.title,
  // }));
  const questionMenuItemList = (bank.questionPage?.records || []).map(
    (question) => {
      return {
        label: (
          <Link
            href={`/bank/${bank.id}/question/${question.id}`}
            prefetch={false}
          >
            {question.title}
          </Link>
        ),
        key: question.id,
      };
    },
  );

  return (
    <div id="bankQuestionPage">
      {/*<Flex gap={24}>*/}
      {/*  <Sider width={240} theme="light" style={{ padding: "24px 0" }}>*/}
      {/*    <Button type="primary" style={{ marginBottom: 16 }}>*/}
      {/*      <MenuUnfoldOutlined /> : <MenuFoldOutlined />*/}
      {/*    </Button>*/}
      {/*    <Title level={4} style={{ padding: "0 20px" }}>*/}
      {/*      {bank.title}*/}
      {/*    </Title>*/}
      {/*    /!*<Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>*!/*/}
      {/*    /!*  {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}*!/*/}
      {/*    /!*</Button>*!/*/}

      {/*    <Menu  items={questionMenuItemList} selectedKeys={[questionId]} />*/}
      {/*  </Sider>*/}
      {/*  <Content>*/}
      {/*    <QuestionCard question={question}  />*/}

      {/*  </Content>*/}
      {/*</Flex>*/}

      <div id="bankQuestionPage">
        <Flex gap={24}>
          <QuestionSidebar
            bank={bank}
            questionMenuItemList={questionMenuItemList}
            questionId={questionId}
          />
          <Content>
            <QuestionCard question={question} />
          </Content>
        </Flex>
      </div>
    </div>
  );
}
